<template>
  <div class="comment-item">
    <div class="comment-info">
      <div class="user-photo">
        <img :src="content.photo" alt="">
      </div>
      <span class="info">{{content.userName}}</span>
      <span class="info">{{content.dbCreateTime | date('yyyy-MM-dd HH:mm')}}</span>
      <span class="info"><span class="icon iconfont">&#xe623;</span> {{content.voteCount}}</span>
      <span class="handle-comment" :class="{active:activeComment}" @click="handleComment">{{handleName}}</span>
    </div>
    <div class="comment-content">
      <span>{{content.content}}</span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'commentItem',
  props:["content","status"],
  data(){
    return {
      activeComment:this.content.hasHandle
    }
  },
  computed:{
    handleName(){
      let statusMap={
        "1":"隐藏该条评论",
        "2":"显示该条评论"
      };

      return this.status && statusMap[this.status];
    }
  },
  created() {
    this.$watch("content",()=>{//翻页重置跟帖选中状态
      this.activeComment = this.content.hasHandle
    });
  },
  methods:{
    handleComment(){
      this.activeComment = !this.activeComment;
      this.$emit("handle",{id:this.content.id,status:this.status});
    }
  }
};
</script>

<style lang="less" rel="stylesheet/less">
.comment-item{
  padding: 10px 0 20px;
  border-bottom: 1px solid #ccc;
  .comment-info{
    .user-photo{
      width: 30px;
      height: 30px;
      overflow: hidden;
      border-radius: 15px;
      display: inline-block;
      vertical-align: middle;
      img{
        width: 100%;
      }
    }
    .info{
      font-size: 16px;
      margin-left: 15px;
      color: #666666;
    }
    .handle-comment{
      font-size: 16px;
      float: right;
      color: #888;
      cursor: pointer;
      &:hover{
        text-decoration:underline;
      }
      &.active{
        color: #2e9057;
        font-weight: bold;
      }
    }
  }
  .comment-content{
    margin-top: 15px;
  }
}
</style>
